<template>
  <div class="forget-password-wrap">
    <section class="forget-password">
      <h3>重置登录密码</h3>
      <el-steps :active="active" finish-status="success" simple>
        <el-step title="身份验证" />
        <el-step title="重置登录密码" />
        <el-step title="重置成功" />
      </el-steps>
      <!--身份验证-->
      <div v-show="active === 1">
        <div class="form-password">
          <el-form ref="authentication" :rules="authentication" :model="formData" label-width="80px">
            <el-form-item prop="phone" label="手机号">
              <el-input v-model="formData.phone" placeholder="请输入手机号" />
            </el-form-item>
            <el-form-item prop="mailAddress" label="邮箱">
              <el-input v-model="formData.mailAddress" placeholder="请输入邮箱" />
            </el-form-item>
            <el-form-item prop="verificationCode" label="验证码">
              <el-input v-model="formData.verificationCode" auto-complete="off" placeholder="请输入验证码" style="width: 74%;margin-right: 1.2%" />
              <el-button style="width: 24%;" type="primary" :disabled="countDownShow || !formData.mailAddress || !formData.phone" @click="setMailToUser"> {{ countDownShow ? `${countDown}s` : '获取验证码' }}</el-button>
            </el-form-item>
            <!--            <el-form-item prop="codeUrl" label="验证码">-->
            <!--              <el-input v-model="formData.codeUrl" auto-complete="off" placeholder="请输入验证码" style="width: 75.5%;margin-right: 10px">-->
            <!--                <i slot="suffix" class="el-icon-refresh" style="cursor:pointer;" @click="setMailToUser" />-->
            <!--              </el-input>-->
            <!--              <div class="login-code">-->
            <!--                <img v-if="showCode" :src="codeUrl" @click="getCode">-->
            <!--                <svg-icon v-if="!showCode" icon-class="pic-broken" style="cursor:pointer;width: 100px;height: 40px;" @click="getCode" />-->
            <!--              </div>-->
            <!--            </el-form-item>-->
          </el-form>
        </div>
        <div class="btn-wrap">
          <el-button size="medium" type="primary" @click="goResetPassword">下一步</el-button>
          <span class="login" @click="goLogin">登录</span>
        </div>
      </div>
      <!--重置登录密码-->
      <div v-show="active === 2">
        <div class="form-password">
          <el-form ref="resetPassword" :rules="resetPassword" :model="formResetPassword" label-width="80px">
            <el-form-item prop="password" label="修改密码">
              <el-input v-model="formResetPassword.password" placeholder="请输入密码" />
            </el-form-item>
            <el-form-item prop="confirmPassword" label="确认密码">
              <el-input v-model="formResetPassword.confirmPassword" auto-complete="off" placeholder="请输入密码" />
            </el-form-item>
          </el-form>
        </div>
        <div class="btn-wrap">
          <el-button size="medium" type="primary" @click="ResetPasswordSubmit">下一步</el-button>
          <span class="login" @click="goLogin">登录</span>
        </div>
      </div>
      <!--重置成功-->
      <div v-show="active === 3" class="success">
        <p> <i class="icon el-icon-circle-check" /> </p>
        <p>重置成功，请牢记新密码</p>
        <div class="btn-wrap">
          <el-button size="medium" type="primary" @click="goLogin">去登录</el-button>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
// 验证码接口
import { captchaImage } from '@/api/user'
// 页面api
import { setMailToUser, checkMailNum, updatePasswords } from '@/api/ForgetPassword'
import { validateNumLetter, validEmail, validEmail01, validatePhone } from '@/utils/validate.js'
export default {
  name: 'ForgetPassword',
  data() {
    const passwordLength = (rule, value, callback) => {
      if (value.length < 6 || value.length > 20) {
        return callback(new Error('密码不能少于6位且不能大于20位'))
      } else {
        callback()
      }
    }
    const validateCertainPassword = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('确认密码不得为空'))
      } else {
        const password = this.formResetPassword.password
        if (value !== password) {
          return callback(new Error('两次输入的密码不一致！请重新输入'))
        } else {
          callback()
        }
      }
    }
    return {
      active: 1, // 步骤条进度
      showCode: false, // 验证码正常显示
      codeUrl: '', // 验证码
      countDownShow: false, // 是否显示倒计时
      countDown: 60, // 倒计时
      /* 身份验证 start*/
      formData: {
        phone: '',
        mailAddress: '',
        verificationCode: '',
        codeUrl: ''
      },
      authentication: {
        phone: [
          { required: true, message: '手机号不能为空', trigger: 'blur' },
          { required: true, validator: validatePhone, message: '请输入正确的账号/手机号' }
        ],
        mailAddress: [
          { required: true, message: '邮箱不能为空', trigger: 'blur' },
          { required: true, validator: validEmail, message: '请输入正确的邮箱' },
          { validator: validEmail01, message: '请输入QQ或163或126邮箱' }
        ],
        verificationCode: [{ required: true, message: '验证码不能为空', trigger: 'blur' }],
        codeUrl: [{ required: true, message: '验证码不能为空', trigger: 'blur' }]
      },
      /* 身份验证 end*/

      /* 重置密码 start*/
      formResetPassword: {
        password: '',
        confirmPassword: ''
      },
      resetPassword: {
        password: [
          { required: true, message: '修改密码不能为空', trigger: 'blur' },
          { validator: passwordLength },
          { validator: validateNumLetter },
          { validator: validateCertainPassword }
        ],
        confirmPassword: [
          { required: true, message: '确认密码不能为空', trigger: 'blur' },
          { validator: passwordLength },
          { validator: validateNumLetter },
          { validator: validateCertainPassword }
        ]
      }
      /* 重置密码 end*/
    }
  },
  mounted() {
    // 图片验证
    this.getCode()
  },
  methods: {
    // 图片验证
    getCode() {
      captchaImage().then(res => {
        this.codeUrl = 'data:image/gif;base64,' + res.data.img
        this.showCode = true
      }).catch(() => {
        this.showCode = false
      })
    },
    async setMailToUser() {
      const { phone, mailAddress } = this.formData
      setMailToUser({ phone, mailAddress })
      this.countDownShow = true
      this.timer = setInterval(() => {
        this.countDown--
        if (this.countDown === 0) {
          this.show = false
          clearInterval(this.timer)
        }
      }, 1000)
    },
    // 跳转重置密码
    goResetPassword() {
      this.$refs.authentication.validate(async(valid) => {
        if (valid) {
          const { phone, verificationCode } = this.formData
          const { code } = await checkMailNum({ phone, verificationCode })
          if (code === 200) this.active = 2
        }
      })
    },
    // 提交重置密码
    ResetPasswordSubmit() {
      this.$refs.resetPassword.validate(async(valid) => {
        if (valid) {
          const { phone } = this.formData
          const { password } = this.formResetPassword
          const { code } = await updatePasswords({ phone, password })
          if (code === 200) this.active = 3
        }
      })
    },
    // 跳转登录
    goLogin() {
      this.$router.push({
        path: '/login'
      })
    }
  }
}
</script>
